<template>
  <Header title="成员管理" sub="又要改成员了呀"/>
  <el-table :data="tableData" @selection-change="selectionChange" width="100%">
    <el-table-column align="center" type="selection"/>
    <el-table-column label="学号" prop="id" align="center" sortable/>
    <el-table-column label="姓名" prop="name" align="center" sortable/>
    <el-table-column label="权限" prop="type" align="center" sortable>
      <template #default="scope">
        <el-tag :type="getTag(scope.row.type)">{{ scope.row.type }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="查看详情" align="center">
      <template #default="scope">
        <el-button size="small" @click="detailEdit(scope.$index, scope.row)" type="primary" round>详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="editDialog" fullscreen title="编辑成员信息" :show-close="false">
    <el-form :model="editing" label-width="auto">
      <el-form-item label="姓名：">
        <el-input v-model="editing.name"/>
      </el-form-item>
      <el-form-item label="工/学号：">
        <el-input v-model="editing.id" :disabled="changeing"/>
      </el-form-item>
      <el-form-item label="手机号码：">
        <el-input v-model="editing.phone"/>
      </el-form-item>
      <el-form-item label="专业：">
        <el-select v-model="editing.profession" style="width: 100%">
          <el-option value="教信"></el-option>
          <el-option value="大类"></el-option>
          <el-option value="免师"></el-option>
          <el-option value="双学位"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="邮箱：">
        <el-input v-model="editing.email"/>
      </el-form-item>
      <el-form-item label="年级：">
        <el-input-number v-model="editing.grade" />
      </el-form-item>
      <el-form-item label="生日：">
        <el-date-picker
            v-model="editing.birthday"
            type="date"
            placeholder="Select date"
            style="width: 100%"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="权限：" v-show="type === '超级管理员'">
        <el-select v-model="editing.type" style="width: 100%">
          <el-option value="管理员"/>
          <el-option value="成员"/>
          <el-option value="超级管理员"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="danger" @click="cancel">不提交</el-button>
        <el-button @click="changeUser" type="success">提交</el-button>
      </span>
    </template>
  </el-dialog>

  <el-button type="danger" round style="width:30%; height:45px" @click="deleteUser">删除</el-button>
  <el-button type="warning" round style="width:30%; height:45px" @click="resetPwd">重置密码</el-button>
  <el-button type="success" round style="width:30%; height:45px" @click="addUser">添加</el-button>
</template>

<script>
import axios from "axios";

let result = {}

export default {
  name: "Approve_Main",
  data() {
    return {
      'tableData': [],
      editDialog: false,
      editing: {},
      type: window.localStorage['type'],
      selectedUsers: undefined,
      changeing: true,
    }
  },
  created() {
    axios.get("/api/getAllUser").then(res => {
      result = res.data

      //遍历result的key
      const temp = []
      for (let key in result) {
        temp.push({
          name: result[key].name,
          id: key,
          type: result[key].type,
        })
      }
      this.tableData = this.tableData.concat(temp)
      console.log(this.tableData)
    })
  },
  methods: {
    getTag(state) {
      switch (state) {
        case '管理员':
          return 'warning'
        case '超级管理员':
          return 'danger'
        case '成员':
          return 'success'
      }
    },
    detailEdit(index, row) {
      this.changeing = true
      this.editDialog = true
      this.editing['id'] = row.id;
      this.editing = Object.assign(this.editing, result[row.id])
      console.log(index);
      console.log(row);
    },
    cancel() {
      this.editDialog = false
    },
    selectionChange(selection) {
      this.selectedUsers = selection
    },
    deleteUser() {
      const users = [];
      for (let i = 0; i < this.selectedUsers.length; i++) {
        users.push(this.selectedUsers[i].id)
      }
      if(confirm("确定删除这些用户吗？")) {
        axios.post("/api/deleteUser", {
          ids: users
        }).then(res => {
          if (res.data === '删除成功') {
            alert(res.data)
            location.reload()
          } else {
            alert("删除失败")
          }
        })
      }
    },
    changeUser() {
      if(confirm("确定修改该用户吗？")) {
        const t = this.editing
        axios.post("/api/changeUser", t).then(res => {
          if (res.data === '修改成功') {
            alert(res.data)
            location.reload()
          } else {
            alert("修改失败")
          }
        })
      }
    },
    addUser() {
      this.changeing = false
      this.editing = {
        name: '',
        id: '',
        phone: '',
        profession: '',
        email: '',
        grade: (new Date()).getFullYear() - 1,
        birthday: '',
        type: '成员'
      }
      this.editDialog = true
    },
    resetPwd() {
      const users = [];
      for (let i = 0; i < this.selectedUsers.length; i++) {
        users.push(this.selectedUsers[i].id)
      }
      if(confirm("确定重置这些用户的密码吗？")) {
        axios.post("/api/resetPwd", {
          ids: users
        }).then(res => {
          if (res.data) {
            alert(res.data)
            location.reload()
          } else {
            alert("重置失败")
          }
        })
      }
    },
  }
}


</script>

<style scoped>

</style>